<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试跨域</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script type="application/javascript">
    //发送简单请求
    $.ajax({
        type:"GET",
        url: "http://localhost:8080/test/server",
        //dataType: "jsonp",
        dataType: "json",
        success: function(data){
            console.log(data);
        },
        error: function(data){
            console.log("error:" + data);
        }
    });

    //发送复杂请求。不是因为post，而是因为contentType
    $.ajax({
        type: "POST",
        url: "http://localhost:8080/test/postjson",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        data: JSON.stringify({id:1, name:"jack"}),
        success: function(data){
            console.log(data);
        },
        error: function(data){
            console.log("error:" + data);
        }
    });

    //发送带cookie的跨域请求
    $.ajax({
        type: "GET",
        url: "http://localhost:8080/test/getCookie",
        xhrFields: {
            withCredentials: true
        },
        success: function(data){
            console.log(data);
        },
        error: function(data){
            console.log("error:" + data);
        }
    });

    //发送带header的请求
    $.ajax({
        type: "GET",
        url: "http://localhost:8080/test/getHeader",
        headers: {
            "x-header1": "headerValue1"
        },
        beforeSend: function(xhr){
            xhr.setRequestHeader("x-header2","headerValue2");
        },
        success: function(data){
            console.log(data);
        },
        error: function(data){
            console.log("error:" + data);
        }
    });
</script>
<body>
</body>
</html>